<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 RDP 客户端</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'SF Pro Display', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

       .container {
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

       .container h1 {
            text-align: center;
            color: #333;
        }

       .form-group {
            margin-bottom: 15px;
        }

       .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

       .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
            transition: border-color 0.3s ease;
        }

       .form-group input:focus {
            outline: none;
            border-color: #0078d7;
        }

       .form-group input:invalid {
            border-color: red;
        }

       .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .form-group button:hover {
            background-color: #005a9e;
        }

       .form-group small {
            color: #666;
        }

       .form-group.error {
            color: red;
            font-size: 0.8em;
        }

        canvas {
            border: 1px solid #ccc;
            background-color: #000;
            margin-top: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 100vw;
            height: 100vh;
            display: none;
            transition: opacity 0.3s ease;
        }

       .control-buttons {
            display: none;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
            transition: opacity 0.3s ease;
        }

       .control-buttons button {
            margin-right: 10px;
            padding: 8px 15px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .control-buttons button:hover {
            background-color: #005a9e;
        }

       .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2;
            justify-content: center;
            align-items: center;
            color: white;
            transition: opacity 0.3s ease;
        }

       .keyboard-toggle {
            display: none;
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 1;
            padding: 8px 15px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .keyboard-toggle:hover {
            background-color: #005a9e;
        }

       .float-ball {
            display: none;
            position: fixed;
            bottom: 50px;
            right: 50px;
            z-index: 3;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            padding: 10px;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

       .float-ball button {
            display: block;
            margin: 5px;
            padding: 8px 15px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .float-ball button:hover {
            background-color: #005a9e;
        }

       .virtual-keyboard {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #ccc;
            padding: 10px;
            z-index: 4;
            transition: opacity 0.3s ease;
        }

       .virtual-keyboard button {
            margin: 5px;
            padding: 8px 15px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .virtual-keyboard button:hover {
            background-color: #005a9e;
        }

       .hidden-input {
            position: absolute;
            left: -9999px;
        }

       .footer {
            text-align: center;
            margin-top: auto;
            padding: 10px;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>HTML5 RDP 客户端</h1>
        <form id="rdpForm">
            <div class="form-group">
                <label for="serverAddress">远程服务器地址：</label>
                <input type="text" id="serverAddress" placeholder="请输入有效的服务器地址（如192.168.1.100）" required>
                <small>请输入IPv4地址或域名，若格式错误无法连接</small>
            </div>
            <div class="form-group">
                <label for="serverPort">端口号（可选，默认3389）：</label>
                <input type="number" id="serverPort" placeholder="请输入1 - 65535之间的端口号" min="1" max="65535">
                <small>默认端口为3389，若服务器使用其他端口，请正确填写，否则无法连接</small>
            </div>
            <div class="form-group">
                <label for="username">用户名（可选）：</label>
                <input type="text" id="username" placeholder="请输入用户名">
                <small>若服务器需要用户名认证，请准确填写</small>
            </div>
            <div class="form-group">
                <label for="password">密码（可选）：</label>
                <input type="password" id="password" placeholder="请输入密码">
                <small>若服务器需要密码认证，请准确填写</small>
            </div>
            <div class="form-group">
                <button type="submit">连接到远程桌面</button>
            </div>
        </form>
        <div id="errorMessages" class="error"></div>
    </div>
    <canvas id="rdpCanvas"></canvas>
    <div class="control-buttons" id="controlButtons">
        <button id="disconnectButton">断开连接</button>
        <button id="pasteButton">粘贴</button>
        <button id="resolutionButton">更改分辨率</button>
    </div>
    <div class="loading-overlay" id="loadingOverlay">正在更改分辨率...</div>
    <button class="keyboard-toggle" id="keyboardToggle">唤起键盘</button>
    <div class="float-ball" id="floatBall">
        <button id="disconnectButtonFloat">断开连接</button>
        <button id="pasteButtonFloat">粘贴</button>
        <button id="resolutionButtonFloat">更改分辨率</button>
        <button id="exitFullscreenButton">退出全屏</button>
    </div>
    <div class="virtual-keyboard" id="virtualKeyboard"></div>
    <input type="text" class="hidden-input" id="keyboardInput">
    <div class="footer">
      <br>
        代码维护及开发完善：scicat<br>
        HTML5 RDP版本v1.0.1<br>
        本站由本站搭建者所有<br>
        |<a href="https://gitee.com/scicat/html-rdp?force_mobile=true">项目开源地址</a>|<a href="talk/index.html">本站HTML5 RDP专用聊天室</a>|
    </div>
    <script src="client.js"></script>
</body>

</html>
